<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>定位布局和flex布局</title>
		<style>
			#box01 {
				width: 500px;
				height: 500px;
				border: 1px solid darkorange;

				display: flex;

				justify-content: center;
				align-items: center;
			}

			#box02 {
				width: 300px;
				height: 300px;
				border: 1px solid blueviolet;
			}

			#box03 {
				width: 300px;
				height: 300px;
				border: 1px solid blueviolet;
			}

			#nav {
				width: 100%;
				height: 50px;
			}

			#nav ul {
				width: 1200px;
				height: 50px;
				margin: 0 auto;
				list-style: none;

				display: none;

				flex-wrap: nowrap;
			}

			#nav ul li {
				height: 50px;
				margin: 0 1px;
				flex-grow: 1;
			}

			#nav ul li a {
				display: block;
				height: 50px;
				line-height: 50px;
				font-size: 20px;
				background-color: blue;
				color: white;
				text-align: center;
			}

			#box03 {
				width: 1200px;
				overflow: auto;
				border: 1px solid #cCCCCC;
				padding: 20px 0;

				display: flex;
				justify-content: space-around;
			}

			#box04 {
				width: 400px;
				height: 300px;
				background-color: #cCCCCC;
			}

			#box05 {
				width: 760px;
				height: 300px;
				background-color: aliceblue;
			}

			#box6 {
				width: 1200px;
				overflow: auto;
				border: 1px solid #CCCCCC;
				display: flex;
				justify-content: space-between;
			}

			#box7,#box8 {
				width: 220px;
				height: 300px;
				background-color: gray;
			}

			#box9 {
				width: 350px;
				height: 300px;
				background-color: gray;
			}

			#box10 {
				width: 300px;
				height: 300px;
				background-color: gray;
			}








			.box {
				width: 200px;
				height: 100px;
				border: 1px solid #ccc;
			}

			.container {
				width: 100%;
				height: 400px;
				background-color: burlywood;
				position: static;
			}

			.static {
				position: static;
			}

			.relative {
				position: relative;
				left: 30px;
			}

			.fixed {
				position: fixed;
				right: 0;
				bottom: 0;
			}

			.absolute {
				width: 100%;
				height: 30px;
				line-height: 30px;
				background-color: rgba(0, 0, 0, 0.2);
				position: absolute;
				bottom: 0pu;
				left: 0;
			}
		</style>
	</head>
	<body>

		<div id="box01">
			<div id="box02">
				内部方格
			</div>
			<div id="box03">
				内2方格
			</div>
		</div>

		<nav id="nav">
			<ul>
				<li><a>音乐</a></li>
				<li><a>影视</a></li>
				<li><a>旅游</a></li>
				<li><a>旅游</a></li>
				<li><a>旅游</a></li>
			</ul>
		</nav>

		<div id="box03">
			<div id="box04">图片</div>
			<div id="box05">文本段落</div>
		</div>

		<div id="box6">
			<div id="box7">销量榜</div>
			<div id="box8">品牌榜</div>
			<div id="box9">广告1</div>
			<div id="box10">广 告2</div>
		</div>





		<div class="box static">静态定位</div>
		<div class="box relative">相对定位</div>
		<div class="box fixed">固定定位</div>
		<div class="container">
			<div class="absolute">
				绝对定位
			</div>
		</div>



	</body>
</html>
